<template>
  <div class="container">
    <el-dialog
      append-to-body
      title="选择订单"
      :visible.sync="isVisible"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="70%"
      @open="MarterdialogShow"
    >
      <div class="dialogDody marDialog flex flex_column">
        <div class="btnCon flex flex_between" style="border-bottom:none">
          <!--      搜索框-->
          <div class="search">
            <el-input
              v-model="materalSearch.likeWords"
              prefix-icon="el-icon-search"
              placeholder="输入关键字"
              size="small"
              @keyup.enter.native="MarterdialogShow"
            >
            </el-input>
          </div>
        </div>
        <!-- 表格区域       -->
        <div class="tableCon pt0" style="padding: 16px">
          <el-table :data="materialList" v-loading="loading" border style="width: 100%" height="500">
            <el-table-column prop="xieYiShuHao" label="订单单号" width="200" />
            <el-table-column prop="orderTypeName" label="订单类型" width="100" />
            <el-table-column prop="orderCreateTime" label="创建时间" width="150"/>
            <el-table-column prop="orderProductName" label="产品名称" width="200" show-overflow-tooltip />
            <el-table-column prop="printingSurface" label="版面" />
            <el-table-column prop="productVersion" label="版本" />
            <el-table-column prop="taoZhuangQuantity" label="套数" />
            <el-table-column prop="expectedDeliveryTime" label="交货日期" width="150" />
            <el-table-column width="105" prop="surplusDeliverGoodsDays" label="剩余日期" />
            <el-table-column width="135" prop="customerName" label="所属客户" show-overflow-tooltip />
            <el-table-column width="105" prop="salesmanName" label="业务人员" />
            <el-table-column
              label="操作"
              width="100px"
              fixed="right"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="medium"
                  style="color: #606266"
                  @click="selectCurrentRow(scope.row)"
                >
                  选择
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 S-->
      <div class="d_pag">
        <pagination
          :total="orderTotal || 0"
          :page.sync="materalSearch.pageIndex"
          :limit.sync="materalSearch.pageSize"
          @pagination="MarterdialogShow"
        />
      </div>
        </div>
      </div>
    </el-dialog>
    <div class="search-box flex">
      <el-form :model="query" label-width="80px">
        <div class="flex">
          <el-form-item label="订单号">
            <el-input
              v-model="query.xieYiShuHao"
              size="small"
              disabled
            ></el-input>
          </el-form-item>
          <div>
            <el-button
              type="primary"
              size="small"
              style="margin-left: 8px"
              @click="isVisible = true"
              >选择</el-button
            >
            <el-button
              size="small"
              icon="el-icon-download"
              @click="downloadFile"
              >导出数据</el-button
            >
          </div>
        </div>
      </el-form>
    </div>
    <!--table板块-->
    <div class="d_content">
      <div class="orderForm">
        <div class="d_content_left">
          <div class="d_orderDetails">
            <div class="item">
              <dl>
                <dt>订单号</dt>
                <dd>{{ form.orderBaseData.xieYiShuHao || "--" }}</dd>
              </dl>
              <dl>
                <dt>订单类型</dt>
                <dd>{{ form.orderBaseData.orderState || "--" }}</dd>
              </dl>
              <dl>
                <dt>产品名称</dt>
                <dd>{{ form.orderBaseData.orderProductName || "--" }}</dd>
              </dl>
              <dl>
                <dt>版本</dt>
                <dd>{{ form.orderBaseData.productVersion || "--" }}</dd>
              </dl>
              <dl>
                <dt>版面</dt>
                <dd>{{ form.orderBaseData.printingSurface || "--" }}</dd>
              </dl>
              <dl>
                <dt>交货时间</dt>
                <dd>{{ form.orderBaseData.expectedDeliveryTime || "--" }}</dd>
              </dl>
              <dl>
                <dt>标签类型</dt>
                <dd>{{ form.orderBaseData.tagType || "--" }}</dd>
              </dl>
              <dl>
                <dt>计划数量</dt>
                <dd>{{ form.orderBaseData.tagSumQuantity || "--" }}</dd>
              </dl>
              <dl>
                <dt>计划米数</dt>
                <dd>{{ form.orderBaseData.planCpMeter || "--" }}</dd>
              </dl>
            </div>
          </div>
        </div>
        <div class="d_content_auto">
          <div class="content">
            <!-- 操作区 E-->
            <div class="d_nrBox p16">
              <div class="cTitle">
                <h3>物料使用明细</h3>
              </div>
              <div class="tableCon">
                <el-table
                  ref="multipleTable"
                  :data="form.useMaterialStatList"
                  border
                  style="width: 100%"
                >
                  <el-table-column prop="goodsCode" label="物料编号" />
                  <el-table-column prop="goodsType" label="物料类型" />
                  <el-table-column prop="goodsName" label="物料名称" />
                  <el-table-column prop="goodsSpecification" label="物料规格" />
                  <el-table-column prop="getSumQuantity" label="领料数量" />
                  <el-table-column prop="backSumQuantity" label="退料数量" />
                  <el-table-column prop="useSumQuantity" label="使用数量" />
                  <el-table-column prop="useSumSquareMeter" label="平方米" />
                  <el-table-column prop="unitPrice" label="计价单价" />
                  <el-table-column prop="totalAmount" width="80" label="总额" />
                </el-table>
              </div>
              <div class="cTitle">
                <h3>缴库明细</h3>
              </div>
              <div class="tableCon">
                <el-table
                  ref="multipleTable"
                  :data="form.handInDetailStatList"
                  border
                  style="width: 100%"
                >
                  <el-table-column prop="productName" label="产品名称" />
                  <el-table-column prop="productType" label="产品类型" />
                  <el-table-column prop="cartonSizeName" label="纸箱规格" />
                  <el-table-column prop="packageDescription" label="包装描述" />
                  <el-table-column prop="eachBoxQuantity" label="每箱数量" />
                  <el-table-column prop="handInSumBoxCount" label="缴库箱数" />
                  <el-table-column prop="handInSumQuantity" label="缴库数量" />
                </el-table>
              </div>
              <div class="cTitle">
                <h3>工时统计</h3>
              </div>
              <div class="d_remark list list_2">
                <div
                  class="list-item"
                  v-for="(item, index) in form.workTimeStatList"
                  :key="index"
                >
                  <div class="head">
                    <span>{{ item.equipmentName }}</span>
                  </div>
                  <div class="detail">
                    <div>
                      <div class="title-flag">
                        <span>计划工时</span>
                      </div>
                      <div class="date">
                        <span>{{ item.sumPlanWorkTime }}</span>
                        <span>分钟</span>
                      </div>
                    </div>
                    <div>
                      <div class="title-flag">
                        <span>生产工时</span>
                      </div>
                      <div class="date">
                        <span>{{ item.sumActualWorkTime }}</span>
                        <span>分钟</span>
                      </div>
                    </div>
                    <div>
                      <div style="margin-bottom: 8px">
                        <span>状态：</span>
                        <span
                          v-if="
                            item.sumActualWorkTime - item.sumActualWorkTime <= 0
                          "
                          >正常</span
                        >
                        <span
                          v-if="
                            item.sumActualWorkTime - item.sumActualWorkTime > 0
                          "
                          >超时</span
                        >
                        <span
                          v-if="
                            item.sumActualWorkTime - item.sumActualWorkTime >
                            item.sumActualWorkTime * 1.5
                          "
                          >严重超时</span
                        >
                      </div>
                      <progress-box :formData="item.list"></progress-box>
                    </div>
                  </div>
                </div>
                <div style="clear: both"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { fileExport } from "@/utils/index";
import progressBox from "@/components/progress";
import selectDataOrder from "@/components/selectDataOrder";
import Pagination from "@/components/Pagination";
export default {
  name: "orderStatistics",
  components: {
    progressBox,
    selectDataOrder,
    Pagination
  },
  data() {
    return {
      loading:false,
      materalSearch:{
        pageIndex: 1,
        pageSize: 20,
        likeWords: "",
        QueryDataBaseFiled:''
      },
      materialList:[],
      orderTotal:0,
      isVisible:false,
      form: {
        orderBaseData: {},
      },
      showOrder: false,
      query: {
        saleOrderNo: "",
        xieYiShuHao:""
      },
    };
  },
  computed: {
    ...mapGetters(["name", "userInfo"]),
  },
  created() {},
  mounted() {},
  updated() {},
  methods: {

    //获取订单数据
      MarterdialogShow(){
        this.loading = true
        this.$api.report.GetPageValidSaleOrderDataList(this.materalSearch).then((res)=>{
          this.materialList = res.list
          this.orderTotal = res.totalCount;
          this.loading = false
        }).catch(()=>{
          this.loading = false
        })
      },

    add() {
      this.progressData[0].proportion++;
    },

    //导出数据
    downloadFile() {
      // this.downLoading = true;
      // this.$api.report
      //   .ExportInStockReportsDataToExcel(this.query)
      //   .then((res) => {
      //     fileExport(res, "物料入库导出数据", "xlsx");
      //     this.downLoading = false;
      //   });
    },

    //选择订单事件
    selectCurrentRow(row) {
      this.isVisible = false
      this.query.saleOrderNo = row.saleOrderNo;
      this.query.xieYiShuHao = row.xieYiShuHao;
      this.getAllMaterils();
    },

    // 获取详情数据
    getAllMaterils() {
      this.$api.report
        .QueryOrdersStatReportData(this.query)
        .then((res) => {
          this.form = res;
          this.form.workTimeStatList.forEach((item) => {
            item.list = [
              {
                title: "计划工时",
                proportion: item.sumPlanWorkTime,
                color: "#3F61F1",
              },
              {
                title: "生产工时",
                proportion: item.sumActualWorkTime,
                color: "#67C23A",
                percentage: 0,
              },
            ];
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.search-box {
  margin-bottom: 10px;
  height: 64px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #e6e6e6;
  .el-form-item {
    margin-bottom: 0px !important;
  }
}
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.permangeRg {
  border: 1px solid #e6e6e6;
  background: #fff;
  height: 100%;

  .mainTT {
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    padding: 18px 16px;
    padding-bottom: 0;
  }
}
.addWuliaoBox {
  padding: 10px 16px;

  .tableBox {
    margin-top: 16px;
    border: 1px solid #e6e6e6;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    overflow: hidden;

    .tt {
      height: 38px;
      line-height: 38px;
      padding-left: 16px;
      background: #f7f8fa;
      border-radius: 8px 8px 0 0;
    }
  }
}

.subTip {
  border-bottom: 1px #e6e6e6 solid;
  background: #f5f6f9;
  padding: 8px 16px;
}

.orderForm {
  height: 100%;
}

.d_content {
  padding: 0;
}
dl {
  margin-top: 20px;
}

.list-item {
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  .head {
    height: 44px;
    background: #f7f8fa;
    border-bottom: 1px solid #e6e6e6;
    span {
      padding-left: 16px;
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      line-height: 44px;
    }
  }
  .detail {
    padding: 16px;
    padding-right: 15px;
    display: flex;
    align-items: center;
    > div {
      &:not(:last-child) {
        flex: 1;
        margin-right: 10px;
      }
      &:last-child {
        width: 200px;
      }
    }
  }
}

.date {
  margin-top: 8px;
}

.date > span:first-child {
  font-size: 32px;
  font-family: "PingFangSC-Semibold, PingFang SC";
  font-weight: 600;
  color: #333333;
}

.date > span:last-child {
  font-size: 12px;
  font-family: "PingFangSC-Regular, PingFang SC";
  font-weight: 400;
  color: #333333;
}

.title-flag {
  font-size: 14px;
  font-family: "PingFangSC-Regular, PingFang SC";
  font-weight: 400;
  color: #999aaa;
}
</style>
